import React, { Component } from 'react';
import { ScrollView, View, Image, Text } from 'react-native';
import styled from 'styled-components';
import { Actions } from 'react-native-router-flux';

export default class Work extends Component {
  render() {
    const wisdomUnion = [
      {
        title: '智慧工会',
        children: [
          {
            title: '运动排名',
            imgUrl: require('../../assets/work/sportsRankings.png'),
            type: 'sport',
            childrenActions() {
              Actions.sportsrankings();
            }
          },
          {
            title: '教育谈话',
            imgUrl: require('../../assets/work/educationalTalk.png'),
            type: 'edu',
            childrenActions() {
              Actions.eduTalk();
            }
          }
        ]
      },
      {
        title: '智慧警务',
        children: [
          {
            titles: '工作日志',
            imgUrl: require('../../assets/work/workDiary.png'),
            childrenActions() {
              Actions.workdiary();
            }
          }
        ]
      },
      {
        title: '智慧执法',
        children: [
          {
            titles: '罪犯释放',
            imgUrl: require('../../assets/work/criminalRelease.png'),
            childrenActions() {
              Actions.criminalReleased();
            }
          }
        ]
      }
    ];
    return (
      <ScrollView>
        <WorkTextTitle>工作</WorkTextTitle>
        <WorkViewList>
          {wisdomUnion.map(item => (
            <WorkView>
              <WorkViewtitle>{item.title}</WorkViewtitle>
              {item.children.map(info => (
                <OnTouchableOpacity
                  onPress={() => {
                    info.childrenActions();
                  }}>
                  <View
                    style={{
                      width: 70,
                      height: 70,
                      marginLeft: 15,
                      marginBottom: 20
                    }}>
                    <Image
                      source={info.imgUrl}
                      style={{ width: 60, height: 60, margin: 5 }}
                    />
                    <Text style={{ width: 60, marginLeft: 8 }}>
                      {info.title}
                    </Text>
                  </View>
                </OnTouchableOpacity>
              ))}
            </WorkView>
          ))}
        </WorkViewList>
      </ScrollView>
    );
  }
}

const Container = styled.View`
  width: 100%;
  height: 100%;
  background-color: white;
`;
const WorkTextTitle = styled.Text`
  font-size: 40;
  margin-top: 25;
  margin-left: 10;
  font-weight: 500;
`;
const WorkViewList = styled.View`
  width: 100%;
  background-color: transparent;
`;
const WorkView = styled.View`
  width: 100%;
  background-color: transparent;
`;
const WorkViewtitle = styled.Text`
  font-size: 25;
  margin-top: 25;
  margin-left: 10;
  font-weight: 500;
`;
const OnTouchableOpacity = styled.TouchableOpacity``;
